<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" :title="title" @clickLeft="leftBack" background-color="#318cff" color="#fff">
			<view slot="other">
				<block v-if="classifyId">
					<scroll-view scroll-with-animation class="tui-scroll-h" :scroll-x="true" :show-scrollbar="false" v-if="classifyTab">
						<view v-for="(tab, index) in classifyTab" :key="tab.id" class="tui-tab-item" :id="tab.id" :data-current="index" @click="tabClick(tab.id)">
							<view class="tui-tab-item-title" :class="{ 'tui-tab-item-title-active': classifyId == tab.id }">{{ tab.name }}</view>
						</view>
					</scroll-view>
				</block>
				<view class="dfj-flex dfj-flex-ai-c dfj-bg-white dfj-t-666 dfj-t-c">
					<view class="dfj-flex-1 dfj-pd-tb-20" @click="searchTab(1)" :class="sort == 1? 'dfj-t-base':''">综合</view>
					<view class="dfj-flex-1 dfj-pd-tb-20" @click="searchTab(2)" :class="sort == 2? 'dfj-t-base':''">销量</view>
					<view class="dfj-flex-1 dfj-pd-tb-20 dfj-flex dfj-flex-ai-c dfj-flex-jc-c" @click="searchTabPrice()" :class="sort == 3 || sort == 4? 'dfj-t-base':''">
						<view class="dfj-inline-block">价格</view>
						<view class="dfj-t-666">
							<text class="dfj-icon icon-paixujiantoushang dfj-block" :class="sort == 3? 'dfj-t-base':''" style="position: relative;bottom:-15rpx;margin-top: -15rpx;"></text>
							<text class="dfj-icon icon-paixujiantouxia dfj-block" :class="sort == 4? 'dfj-t-base':''" style="position: relative;top:-15rpx;margin-bottom: -15rpx;"></text>
						</view>
					</view>
					<view class="dfj-flex-1 dfj-pd-tb-20 dfj-ps-r" @click="tapFiltrate">
						<text>筛选</text><text class="dfj-icon icon-xiala"></text>
					</view>
				</view>
			</view>
		</uni-nav-bar>
		<uni-transition :mode-class="['slide-top']" :show="isFiltrate" class="search-filtrate">
			<block v-for="(item,index) in tabBars">
				<view class="filtrate-item" v-if="index != 0" @click="searchTabars(item)">{{ item.menuName }}</view>
			</block>
		</uni-transition>
		
		<view class="dfj-pd-t-50 dfj-mg-t-50" :style="classifyId?'padding-top: 120rpx;':'padding-top: 60rpx;'">
			<view class="dfj-flex dfj-flex-jc-sb dfj-flex-d-r dfj-flex-w-w dfj-pd-lr-15">
				<navigator :url="`/pages/home/details?pId=${item.pId}`" hover-class="navigator-hover" class="goods-item dfj-bd-radius-10 dfj-overflow-hide dfj-bg-white dfj-mg-b-15" v-for="(item,index) in goods" :key="index">
					<view class="dfj-ps-r" style="height: 360rpx;">
						<image :src="item.iconUrl" style="width: 100%;height: 100%;vertical-align: top;"/>
						<view class="cycleName-label">{{ item.cycleName }}</view>
					</view>
					<view class="dfj-t-ellipsis dfj-t-ellipsis-2 dfj-mg-lr-15">{{ item.productTitle }}</view>
					<view class="dfj-flex dfj-flex-ai-c dfj-pd-15">
						<view class="dfj-flex-1 dfj-t-danger">￥{{ item.productPrice }}</view>
						<view class="dfj-t-999">{{ item.salesVolume }}人付款</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				isFiltrate: false,
				goods: [],
				page: 1,
				forbid: true,
				retrievalName:'',
				classifyId: '',
				sort: 1,
				sellCycle: '',
				tabBars: [],
				classifyTab: ''
			}
		},
		onLoad(options) {
			console.log(options)
			this.retrievalName = options.retrievalName || ''
			this.classifyId = options.classifyId || ''
			this.title = options.retrievalName || options.title
			this.loadMore();
			this.tabBars = JSON.parse(localStorage.getItem('tabBars'))
		},
		onShow() {
			this.classifyTab = []
			this.classifyTab = JSON.parse(sessionStorage.getItem('classifyTab'));
			console.log(this.classifyTab)
		},
		methods:{
			leftBack() {
				uni.navigateBack();
			},
			rightSearch() {
				uni.navigateTo({
					url: "/pages/car/car"
				})
			},
			tapFiltrate() {
				this.isFiltrate = !this.isFiltrate
			},
			loadMore() {
				if(this.forbid) {
					this.$http({
						url: '/sys/findProductByParam',
						method: 'GET',
						data: {classifyId: this.classifyId,retrievalName: this.retrievalName,sort: this.sort,page: this.page,rows: '20',sellCycle: this.sellCycle}
					}).then(res=> {
						console.log(res)
						this.page++;
						if(res.data.list <= 0){
							this.forbid = false
						}else {
							this.goods.push(...res.data.list)
						}
					})
				}
			},
			searchTab(sort) {
				this.page = 1;
				this.goods = [];
				this.sort = sort;
				this.loadMore()
			},
			searchTabPrice() {
				if(this.sort != 3){
					this.sort = 3
				}else{
					this.sort = 4
				}
				this.page = 1;
				this.goods = [];
				this.loadMore()
			},
			searchTabars(item) {
				this.isFiltrate = false;
				this.sellCycle = item.menuParam;
				this.page = 1;
				this.goods = [];
				this.loadMore()
			},
			tabClick(id){
				this.forbid = true
				this.classifyId = id
				this.page = 1;
				this.goods = [];
				this.loadMore()
			}
		},
		onPageScroll() {
			this.isFiltrate = false
		},
		onReachBottom() {
			this.loadMore()
		}
	}
</script>

<style lang="scss" scoped>
	.goods-item{
		width: 49%;
	}
	.search-filtrate{
		position: fixed;
		top: 155rpx;
		right: 20rpx;
		background: #fff;
		width: 220rpx;
		z-index: 99;
		box-shadow: 0 0 20px #ccc;
		padding: 0 20px;
		box-sizing: border-box;
		.filtrate-item{
			padding: 5px 0;
			color: #666;
		}
	}
	.tui-scroll-h {
		width: 750rpx;
		height: 80rpx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		background: #fff;
	}
	
	.tui-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 15rpx;
		padding-right: 15rpx;
		color: #fff;
	}
	.tui-tab-item-title {
		vertical-align: top;
		color: #333;
		font-size: 26rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}
	.tui-tab-item-title-active {
		font-weight: bold;
		color: #318CFF;
		border-bottom: 4rpx solid #318CFF;
		box-sizing: border-box;
	}
</style>
